<template>
    <div class="life">
        <div class="life-title">
            <span>Life Status</span>
            <el-switch :class="switchValue?'':'closeColor'" v-model="switchValue" active-color="#fff" inactive-color="#ccc" :width="45" @change="stateChange">
            </el-switch>
        </div>
        <div class="life-content">
            <div class="life-content-item" :class="chooseItem.indexOf(i)>=0?'active':''" v-for="(it,i) in progressData" :key="it.key" @click="toggleItemBgc(it,i)">
                <div class="main">
                    <div class="title">
                        <span class="title-dot" :style="{backgroundColor: changeDotColor(i)?it.shutColor:it.openColor}"></span>
                        <span class="title-self">{{ it.title }}</span>
                        <span class="title-value">{{ it.value }}%</span>
                    </div>
                    <el-progress class="progress" :percentage="it.value" stroke-linecap="square" :color="it.openColor" :show-text="false" :stroke-width="10"></el-progress>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        getLift,
        getGreenBuilding,
        getCameraImage,
        getTrafficSpeed,
        getBridge,
        getCampus,
        getFlood,
    } from '@/api/data';
    import {
        SetCameraInfo,
        AddCustomPOI,
        AddPOI
    } from '@/util/poi'
    import { SetLiftPoiOption } from '@/util/poiOption'
    export default {
        name: 'LIFT',
        props: [''],
        data() {
            return {
                progressData: [{
                        key: 0,
                        title: 'Flaw Detected',
                        value: 0,
                        openColor: '#f7e975',
                        shutColor: '#666'
                    },
                    {
                        key: 1,
                        title: 'Passenger Trapped',
                        value: 0,
                        openColor: '#f26a73',
                        shutColor: '#666'
                    },
                    {
                        key: 2,
                        title: 'Under Maintenance',
                        value: 0,
                        openColor: '#f3b272',
                        shutColor: '#666'
                    },
                    {
                        key: 3,
                        title: 'Working',
                        value: 0,
                        openColor: '#7ed35a',
                        shutColor: '#666'
                    },
                ],
                switchValue: true,
                liftList: [],
                chooseItem: [],
            };
        },

        components: {},

        computed: {

        },

        beforeMount() {},
        async created() {
            const res = await getLift()
            this.liftList = res.Lift;
            // 存储poi信息
            this.$store.commit('app/SAVE_LIFT_POI_DATA', res.Lift)
            this.setStateNum()
            this.addPoi()
        },
        mounted() {
            // this.setCameraInfo()
        },

        methods: {
            // 监听改变小圆点的颜色（等同于chooseItem.indexOf(i)>=0?）
            changeDotColor(i) {
                return this.chooseItem.some(item => {
                    return item == i
                })
            },
            // 给初始数据设置分类数据
            setStateNum() {
                this.progressData.forEach((el, i) => {
                    let sortArr = this.liftList.filter(it => {
                        return it.state === i
                    })
                    let rate = (sortArr.length / this.liftList.length).toFixed(2)
                    return el.value = parseInt(rate * 100)
                })
            },
            //设置当前镜头视界
            setCameraInfo() {
                let jsondata = SetCameraInfo("103.628922,1.353528") // `${ lon },${ lat }`
                window.cloudRender.SuperAPI("SetCameraInfo", jsondata)
            },
            //增加poi点
            addPoi() {
                let pois = this.liftList
                console.log(location.origin + '/html/lift.html?content=' + JSON.stringify(pois[14]), '11');
                // 清除所有POI
                window.cloudRender.SuperAPI("RemoveAllCovering", {
                    "covering_type": "poi"
                })

                if (!pois || !Array.isArray(pois) || pois.length < 1) return
                // 循环打点
                pois.forEach(it => {
                    let html = location.origin + '/html/lift.html?content=' + JSON.stringify(it)
                    let markerURl = SetLiftPoiOption(it.state).markerUrl
                    let jsondata = AddCustomPOI(it.guid, `${ it.lon },${ it.lat }`, html, markerURl, "180,220");
                    // 自定义POI
                    window.cloudRender.SuperAPI("AddCustomPOI", jsondata)

                })
                // 聚焦所有POI
                setTimeout(() => {
                    window.cloudRender.SuperAPI('FocusAllPOI')
                }, 500)
            },
            // 切换POI的颜色
            toggleItemBgc(item, index) {
                // 定义一个开关
                let onOff = null
                let indexId = this.chooseItem.indexOf(index)
                if (indexId >= 0) {
                    this.chooseItem.splice(indexId, 1)
                    onOff = true
                    console.log(onOff, '开启');
                } else {
                    this.chooseItem.push(index)
                    onOff = false
                    console.log(onOff, '关闭');
                }
                // 申明一个数组 notChoose,该数组是显示在场景中poi的类型
                let notChoose = []
                // 选项控制开关
                if (this.chooseItem.length === 4) {
                    this.switchValue = false
                    notChoose = []
                } else {
                    this.switchValue = true
                    notChoose = [0, 1, 2, 3].filter(el => !this.chooseItem.includes(el))
                }
                console.log(notChoose);
                // 储存场景中显示的poi

                let _arr = this.liftList.filter(it => {
                    return notChoose.includes(it.state)
                })
                this.$store.commit('app/SAVE_LIFT_POI_DATA', _arr);
                console.log(_arr, 'heihei');
                //显示或隐藏poi点
                let jsondata = {
                    "id": "poi_id",
                    "covering_type": "poi",
                    "bshow": true
                }
                let arr = this.liftList.filter(it => it.state === index)

                console.log(arr, this.chooseItem, '66666666666');
                arr.forEach(it => {
                    jsondata.id = it.guid;
                    jsondata.bshow = onOff
                    window.cloudRender.SuperAPI("ShowHideCovering", jsondata)
                })
            },
            // switch开关状态改变回调
            stateChange(val) {
                //显示或隐藏poi点
                let jsonData = {
                    "id": "poi_id",
                    "covering_type": "poi",
                    "bshow": true
                }
                if (val) {
                    this.chooseItem = []
                } else {
                    this.chooseItem = [0, 1, 2, 3]
                }
                this.liftList.forEach(it => {
                    jsonData.id = it.guid;
                    jsonData.bshow = val
                    window.cloudRender.SuperAPI("ShowHideCovering", jsonData)
                })
            }
        },

        watch: {
            // chooseItem: {
            //     handler(n) {
            //         console.log(n, '监听');
            //         n.forEach(it => {
            //             console.log(it);
            //         })
            //     },
            //     immediate: true,
            //     deep: true,
            // },
            // switchValue: {
            //     handler(n) {
            //         if (n) {
            //             this.chooseItem = []
            //         } else {
            //             this.chooseItem = [0, 1, 2, 3]
            //         }
            //     }
            // }
        }

    }
</script>
<style lang='less' scoped>

</style>